<template>
	<view class="sign-up">
		<view class="info">
			<view class="info-item">
				<view class="title">
					{{eventInfo.name}}
				</view>
				<view class="text">
					研学时间：{{eventInfo.carryStartDate}}～{{eventInfo.carryEndDate}}
				</view>
				<view class="text">
					研学地址：{{eventInfo.address}}
				</view>
			</view>
		</view>
		
		<view class="student">
			<view class="header">
				<view class="title">
					研学人管理（{{students.length}}人）
				</view>
				<view class="icon" @click="toStudent">
					<image src="/static/images/plus-icon.png" mode=""></image>
				</view>
			</view>
			<view v-if="students.length">
				<view class="student-item" v-for="(item, index) in students" key="index">
					<view class="student-item-left">
						<view class="name">
							{{item.name}}
						</view>
						<view class="idcard">
							{{item.idCard}}
						</view>
					</view>
					<view class="student-item-right" @click="handleDelete(index)">
						<image src="/static/images/del-icon.png" mode=""></image>
					</view>
				</view>
			</view>
			<view style="padding: 20rpx 0;" v-else>
				<u-empty mode="list" :iconSize="60" text="点击加号添加研学人"></u-empty>
			</view>
		</view>
		<view class="footer">
			<view class="btn-two">
				<view class="btn-left" @click="show = true" v-if="eventInfo.signUpNotice">
					报名须知
				</view>
				<view class="btn-right" @click="handleSign">
					立即报名
				</view>
			</view>
		</view>
		<u-popup :show="show" :round="10" mode="bottom" closeable @close="show = false" @open="show = true">
		  <view class="notice-title">
		  	报名须知
		  </view>
			<view class="notice-content">
				{{ eventInfo.signUpNotice }}
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				eventId: '',
				eventInfo: {},
				students: [],
				show: false,
			}
		},
		onLoad(options) {
			this.students = JSON.parse(options.students || '[]');
			this.eventId = options.eventId;
			this.getEventInfo(options.eventId);
		},
		onPullDownRefresh() {
			this.getEventInfo(this.eventId);
			uni.stopPullDownRefresh();
		},
		methods: {
			async getEventInfo(id) {
				const res = await this.$api('/study/mobile/event/info', 'get', {
					id
				});
				this.eventInfo = res.data;
			},
			toStudent() {
				uni.navigateTo({
					url: `/pages/my/student?eventId=${this.eventId}&students=${JSON.stringify(this.students)}`,
				});
			},
			handleDelete(index) {
				this.students.splice(index, 1);
			},
			
			async handleSign() {
				if(!this.students.length) {
					uni.showToast({
						icon: 'none',
						title: '请选择研学人'
					});
					return;
				}
				uni.showLoading({
					title: '处理中...',
				});
				const res = await this.$api('/study/mobile/event/sign', 'post', {
					eventId: this.eventId,
					studentIds: this.students.map(item => item.id),
				});
				uni.hideLoading();
				if(res.code === 0) {
					uni.navigateTo({
						url: `/pages/my/order-detail?id=${res.data.id}`,
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sign-up {
		margin: 0 30rpx;
		
		.info {
			.info-item {
				margin-top: 30rpx;
				padding: 30rpx;
				background-color: #fff;
				border-radius: 20rpx;
		
				.title {
					padding-bottom: 20rpx;
					margin-bottom: 20rpx;
					color: #218BCC;
					border-bottom: 1rpx solid #ccc;
					font-size: 34rpx;
				}
		
				.text {
					padding: 10rpx 0;
					color: #203F3F;
				}
			}
		}
		.student {
			margin-top: 30rpx;
			padding: 30rpx 30rpx 0;
			background-color: #fff;
			border-radius: 20rpx;
			.header {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 30rpx;
				.icon {
					width: 48rpx;
					height: 48rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			
			.student-item {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding: 40rpx 0;
				border-top: 1px solid #ccc;
				
				.student-item-left {
					.idcard {
						padding-top: 10rpx;
						color: #666;
					}
				}
				
				.student-item-right {
					image {
						width: 60rpx;
						height: 60rpx;
					}
				}
			}
		}
		
		.notice-title {
			padding: 30rpx;
			text-align: center;
			font-weight: bold;
			font-size: 36rpx;
		}
		
		.notice-content {
			padding: 0 30rpx 160rpx;
			white-space: pre-wrap;
			color: #333;
			font-size: 26rpx;
		}
	}
</style>